<template>
  <div class="order">
    <section>
      <label>
        订单号
        <el-input
          placeholder="订单号"
          v-model="ordernum"
          clearable
          style="width: 150px"
        ></el-input>
      </label>
      <label>
        收货人
        <el-input
          placeholder="收货人"
          v-model="courier"
          clearable
          style="width: 150px"
        >
        </el-input>
      </label>
      <label>
        手机号
        <el-input
          placeholder="手机号"
          v-model="phone"
          clearable
          style="width: 150px"
        >
        </el-input>
      </label>
      <label>
        订单状态
        <el-input
          placeholder="订单状态"
          v-model="status"
          clearable
          style="width: 150px"
        >
        </el-input>
      </label>
      <p>
        <label>
          选择日期
          <el-date-picker
            v-model="dateval"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </label>
        <el-button type="primary" @click="inquire">查询</el-button>
      </p>
    </section>
    <section>
      <el-table :data="arr" border>
        <el-table-column label="订单号" prop="orderNo"></el-table-column>
        <el-table-column label="下单时间" prop="orderTime"></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="收货人" prop="consignee"></el-table-column>
        <el-table-column label="配送地址" prop="deliverAddress">
        </el-table-column>
        <el-table-column label="送达时间" prop="deliveryTime"></el-table-column>
        <el-table-column label="用户备注" prop="remarks"></el-table-column>
        <el-table-column label="订单金额" prop="orderAmount"></el-table-column>
        <el-table-column label="订单状态" prop="orderState"></el-table-column>
        <el-table-column label="操作">
          <el-button type="success" icon="el-icon-search" circle></el-button>
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
        </el-table-column>
      </el-table>
    </section>
    <el-pagination
      :current-page="currentPage1"
      :page-sizes="[10, 50, 100, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="10"
    >
    </el-pagination>
  </div>
</template>

<script>
import { checkorder } from "@/apis/order";

export default {
  data() {
    return {
      ordernum: "",
      courier: "",
      phone: "",
      status: "",
      dateval: [],
      arr: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    inquire() {
      checkorder({
        currentPage: 1,
        pageSize: 10,
        orderNo: this.ordernum,
        consignee: this.courier,
        phone: this.phone,
        orderState: this.status,
        date: this.dateval,
      }).then((res) => {
        console.log(res);
        this.arr = res.data.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.order {
  background: #fff;
  height: 100%;
  padding: 20px;
  color: #7e7f83;
  section {
    margin-bottom: 50px;
  }
  label {
    margin-right: 30px;
  }
  input {
    text-indent: 10px;
    border: 1px solid #dcdfe6;
    outline: none;
    padding: 10px;
    margin: 20px;

    &:focus {
      border: 1px solid #409eff;
    }
    &::placeholder {
      color: #c0c4cc;
    }
  }

  p {
    margin: 20px 0;
    button {
      margin: 0 20px;
    }
  }
}
</style>